<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="取消订单" unmount-on-close @close="onClose">
    <page-form class="page-form" :model="form" layout="vertical" ref="formRef">
      <page-form-row :gutter="24">
        <page-form-item v-if="REFUND_AMOUNT_RESULT.refundAmount != null" field="refundAmount" label="可退款总额" size="1/2">
          <i-input-number v-model="form.refundAmount" />
        </page-form-item>
        <page-form-item field="breachAmount" label="违约金" size="1/2">
          <i-input-number v-model="form.breachAmount" />
          <template v-if="REFUND_AMOUNT_RESULT.refundAmount != null && form.breachAmount != null" #label-extra>
            <span style="color: #919aa5">违约金抵扣后可退款总额：</span>
            <span style="color: #1890ff">
              {{
                decimal.sub(form.refundAmount || 0, form.breachAmount || 0) < 0
                  ? 0
                  : decimal.sub(form.refundAmount || 0, form.breachAmount || 0)
              }}
              元
            </span>
          </template>
        </page-form-item>
        <page-form-item size="1">
          <div class="alert">
            <div>违约金 &lt; 退款总额，则生成退款及违约金2笔费项，且退款金额直接抵扣至违约金</div>
            <div>违约金 ≥ 退款总额，则退款全额自动抵扣违约金，生成2笔费项，且退款默认为已结算</div>
          </div>
        </page-form-item>
        <page-form-item field="cancelRemark" label="取消订单备注" size="1">
          <i-textarea v-model="form.cancelRemark" />
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import iTextarea from '@/views/order/short-order/components/i-textarea.vue'

  import { calcPrice, cancel } from '@/api/order/sOrder'
  import decimal from '@/utils/calculation'

  import { ref } from 'vue'
  import { Notification } from '@arco-design/web-vue'
  const visible = ref(false)
  const form = ref<any>({})
  const formRef = ref<any>(null)
  const emit = defineEmits(['ok'])

  // 获取可退款总额和违约金
  const REFUND_AMOUNT_RESULT = ref<any>({})
  const getRefundAmount = () => {
    calcPrice({
      startTime: form.value.startTime,
      endTime: form.value.endTime,
      id: form.value.id,
      siteId: form.value.siteId,
      returnSiteId: form.value.returnSiteId,
      sendServiceFlag: form.value.sendServiceFlag,
      returnServiceFlag: form.value.returnServiceFlag,
      modelId: form.value.carModelId,
      type: 4,
      endCarMileage: form.value.endCarMileage,
    }).then((res: any) => {
      const { result } = res
      REFUND_AMOUNT_RESULT.value = result

      // 可退款总额大于0，则回填并显示
      if (result.refundAmount > 0) {
        form.value.refundAmount = result.refundAmount
      } else {
        form.value.refundAmount = 0
      }

      // 违约金为null表示门店未启用门店取消规则
      if (result.breachAmount != null) {
        if (result.breachAmount > 0) {
          // 违约金大于0，则回填并显示
          form.value.breachAmount = result.breachAmount
        } else if (result.refundAmount == null) {
          // 没有可退款总额，则违约金默认为空
          form.value.breachAmount = null
        } else {
          form.value.breachAmount = 0
        }
      }
    })
  }

  const open = (record: any) => {
    console.log('open', record)

    visible.value = true
    form.value = record

    getRefundAmount()
  }

  const okLoading = ref(false)
  const onClose = () => {
    formRef.value.resetFields()
  }
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    cancel(param)
      .then(() => {
        Notification.success('保存成功')
        visible.value = false
        emit('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .alert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 76px;
    padding: 12px 12px;
    color: #f53f3f;
    background: #f7f8fa;
  }
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .tips-text {
    height: 20px;
    font-size: 14px;
    color: #165dff;
    line-height: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
</style>
